<template>
	<view class="device-stats">
		<view class="device" v-for="(device, index) in devices" :key="index" @click="handleDeviceClick(device.type)">
			<view class="device-left">
				<view v-if="device.iconClass" :class="`custom-icon ${device.iconClass}`" :style="{ color: device.iconColor }"></view>
				<image v-else :src="device.imgSrc" class="sp-img"></image>
				<view class="sb1">{{ device.type }}</view>
			</view>
			<view class="textsb">{{ device.count }}</view>
		</view>
	</view>
</template>

<script setup>
	defineProps({
		devices: {
			type: Array,
			required: true
		}
	});
	
	const handleDeviceClick = (type) => {
	  if (type === '异常设备') {
	    uni.navigateTo({
	      url: '/pages/home/abnormaldetails'
	    });
	  } else if (type === '监控设备') {
	    uni.navigateTo({
	      url: '/pages/manage/vs'
	    });
	  }
	};
</script>

<style scoped lang="scss">
.device-stats {
	width: 750rpx;
	height: 290rpx;
	background-color: #f7f8f9;
	padding-top: 100rpx;
}

.device {
	width: 690rpx;
	height: 110rpx;
	background-color: #fff;
	margin-left: 30rpx;
	border-radius: 20rpx;
	box-shadow: 0 1rpx 20rpx rgba(0, 0, 0, 0.1);
	display: flex;
	margin-bottom: 30rpx;
	justify-content: space-between;
	align-items: center;
}

.device-left {
	display: flex;
	align-items: center;
}

.sp-img {
	width: 36rpx;
	height: 36rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
}

.custom-icon {
	margin-left: 20rpx;
	margin-right: 20rpx;
}

.sb1 {
	font-weight: 550;
}

.textsb {
	color: #999;
	margin-right: 38rpx;
}
</style>